<template>
  <section>
    <el-form inline style="margin-left: 10px;margin-right: 10px;">
      <el-form-item label="将所有字段状态设置为">
        <el-select
          v-model="formData.status"
          placeholder="请选择"
          clearable
          @change="statusChange"
        >
          <el-option
            v-for="item in fileStatus"
            :key="item.keyword"
            :label="item.label"
            :value="item.keyword"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="将所有字段数据检查设置为">
        <el-select
          v-model="formData.checkStatus"
          placeholder="请选择"
          clearable
          @change="checkStatusChange"
        >
          <el-option
            v-for="item in fileCheckStatus"
            :key="item.keyword"
            :label="item.label"
            :value="item.keyword"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="fieldData" border style="width: 100%">
      <el-table-column prop="field" label="字段名称" width="180">
      </el-table-column>
      <el-table-column prop="columnComment" label="描述" width="180">
      </el-table-column>
      <el-table-column prop="status" label="数据状态" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.status" placeholder="请选择" clearable>
            <el-option
              v-for="item in fileStatus"
              :key="item.keyword"
              :label="item.label"
              :value="item.keyword"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="check" label="数据检查">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.fieldCheck"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in fileCheckStatus"
              :key="item.keyword"
              :label="item.label"
              :value="item.keyword"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
export default {
  name: "FormDataTable",
  props: ["flowData", "select"],
  data() {
    return {
      fieldData: [],
      formData: { status: "", checkStatus: "" },
      fileStatus: this.getDictionary("WORKFLOW_FIELD_STATUS"),
      fileCheckStatus: this.getDictionary("WORKFLOW_FIELD_CHECK")
    };
  },
  mounted() {
    this.getFieldData();
  },
  methods: {
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.field)[0];
      if (target) {
        target[column] = value;
        this.fieldData = newData;
      }
    },
    // 根据数据库表名获取数据字段信息
    getFieldData() {
      if (
        this.flowData &&
        this.flowData.attr &&
        this.flowData.attr.titleFieldTable
      ) {
        this.API.getWorkflowTableFieldList({
          tableName: this.flowData.attr.titleFieldTable
        }).then(res => {
          this.fieldData = [];
          if (res.data) {
            res.data.map(item => {
              if (this.select.fields && this.select.fields.length > 0) {
                let existed = false;
                this.select.fields.map(itemField => {
                  if (item.columnName === itemField.field) {
                    existed = true;
                    this.fieldData.push({
                      field: item.columnName,
                      status: itemField.status,
                      columnComment: item.columnComment,
                      fieldCheck: itemField.fieldCheck
                    });
                  }
                });
                if (!existed) {
                  this.fieldData.push({
                    field: item.columnName,
                    columnComment: item.columnComment,
                    status: "READONLY",
                    fieldCheck: "NOT_CHECK"
                  });
                }
              } else {
                this.fieldData.push({
                  field: item.columnName,
                  columnComment: item.columnComment,
                  status: "READONLY",
                  fieldCheck: "NOT_CHECK"
                });
              }
            });
          }
        });
      }
    },
    statusChange() {
      const newData = [...this.fieldData];
      newData.map(item => {
        item.status = this.formData.status;
      });
      this.fieldData = newData;
    },
    checkStatusChange() {
      const newData = [...this.fieldData];
      newData.map(item => {
        item.fieldCheck = this.formData.checkStatus;
      });
      this.fieldData = newData;
    }
  },
  watch: {
    fieldData: {
      handler(val) {
        console.log(val);
        let tem = [];
        if (val) {
          val.map(item => {
            tem.push({
              field: item.field,
              status: item.status,
              fieldCheck: item.fieldCheck
            });
          });
        }
        this.$emit("getFields", tem);
      },
      deep: true
    }
  }
};
</script>

<style scoped></style>
